<template>
	<div>
		<!-- 新闻详情页 -->
		<!-- 头部 -->
		<div id="header">
			<!-- 返回 -->
			<img @click="$router.history.go(-1)" src="@/assets/img/icon/backup.png">
			<div>资讯</div>
		</div>
		<!-- 主体内容 -->
		<div id="mainer">
			<div class="title">
				<div>{{data.title}}</div>
				<div>{{data.news_time | timed(Vue)}}</div>
			</div>
			<!-- 内容 -->
			<div class="main" v-html="data.title_article"></div>
		</div>
	</div>
</template>

<script>
import moment from 'moment'
	export default {
		data() {
			return {
				nid: this.$route.query.nid, //新闻id
				data:{}, //每篇新闻信息
				Vue:this
			}
		},
		methods:{
			getData(){
				const url=`api/news/newsDetails?nid=${this.nid}`
				return new Promise((resolve,reject)=>{
					this.axios.get(url)
					.then(res => resolve(res.data))
					.catch(err => reject(err))
				})
			}
		},
		filters:{
			timed(value,Vue){
				return Vue.moment(value).format('YYYY年MM月DD日')
			}
		},
		mounted(){
			// 加载新闻数据
			this.getData().then(res=>this.data=res.result)
		}
	}
</script>

<style lang="scss" scoped>
// 头部
#header {
	display: flex;
	justify-content: center;
	padding: 0.615em 0;
	border-bottom:1px solid #eeeeee;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	z-index: 2;
	img{
		position: absolute;
		top: 0.615em;
		left: 0.313em;
		width: 1.13em;
	}
}
#mainer {
	margin-top: 2.5em;
	>.title {
		padding: 0.615em 0.315em;
		>div {
			// 标题
			&:nth-child(1){
				color: #9a4145;
				font-size: 1.2em;
				line-height: 1.5em;
				font-weight: bold;
			}
			&:nth-child(2){
				text-align: right;
			}
		}
	}
	>.main {
		padding: 0.615em 0.315em;
		line-height: 1.88em;
	}
}
</style>